<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/admin/product/spumanage"
        >商品管理</el-breadcrumb-item
      >
      <el-breadcrumb-item to="/admin/product/attributetemplatemanage"
        >属性模板管理</el-breadcrumb-item
      >
      <el-breadcrumb-item to="/admin/product/attributemanage"
        >属性列表管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>添加属性</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              <i class="el-icon-edit"></i> &nbsp; 内容信息
            </h3>
          </div>
        </el-col>
      </el-row>
      <div class="divider"></div>
      <el-row>
        <el-col :span="16">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="130px"
            class="demo-ruleForm"
          >
            <el-form-item label="属性名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="属性值录入方式" prop="inputType">
              <el-radio-group v-model="ruleForm.inputType">
                <el-radio class="mradio" :label="0" border size="mini"
                  >手动录入</el-radio
                >
                <br />
                <el-radio class="mradio" :label="1" border size="mini"
                  >提供属性备选值列表(单选录入)</el-radio
                >
                <br />
                <el-radio class="mradio" :label="2" border size="mini"
                  >提供属性备选值列表(多选录入)</el-radio
                >
                <br />
                <el-radio class="mradio" :label="3" border size="mini"
                  >提供属性备选值列表(下拉列表单选录入)</el-radio
                >
                <br />
                <el-radio class="mradio" :label="4" border size="mini"
                  >提供属性备选值列表(下拉列表多选录入)</el-radio
                >
                <br />
              </el-radio-group>
              <p class="beizhu">
                1.
                选择“手动录入”时，届时添加商品属性时可以对商品实时录入可选值。
              </p>
              <p class="beizhu">
                2.
                选择“提供属性备选值列表(单选录入)”时，届时添加商品时可以从备选值列表中选择一个属性值。
              </p>
              <p class="beizhu">
                3.
                选择“提供属性备选值列表(多选录入)”时，届时添加商品时可以从备选值列表中选择多个属性值。同时还能对不同属性值指定不同的价格加价，用户购买商品时需要选定具体的属性值。
              </p>
            </el-form-item>

            <el-form-item
              v-if="ruleForm.inputType != 0"
              label="属性备选值列表"
              prop="valueList"
            >
              <el-input
                type="textarea"
                autosize
                placeholder="请输入备选值"
                v-model="ruleForm.valueList"
              >
              </el-input>
              <p class="beizhu">备注：备选值之间使用英文逗号分隔</p>
            </el-form-item>
            <el-form-item label="排序值" prop="sort">
              <el-input v-model="ruleForm.sort"></el-input>
              <p class="beizhu">备注：排序值越大越靠前</p>
            </el-form-item>
            <el-form-item label="简介" prop="description">
              <el-input type="textarea" v-model="ruleForm.description"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="$router.go(-1)">返回</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        inputType: 0,
        sort: 0,
        templateId: this.$route.params.attributeTemplateId,
        type: 0, // 通过该属性控制新增属性为 非销售属性属性(0)还是销售属性(1)
      },
      rules: {
        name: [{ required: true, message: "请填写属性名称", trigger: "blur" }],
        sort: [{ required: true, message: "排序值不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          // 添加属性
          this.attributeApi.add(this.ruleForm).then((res) => {
            console.log("添加属性：", res);
            if (res.data.state == 200) {
              this.$message({
                showClose: true,
                message: "恭喜，属性添加成功",
                type: "success",
              });
              this.$router.push(
                `/home/product/nosalesattributemanage/${this.$route.params.attributeTemplateId}`
              );
            }else{
              this.$alert(res.data.message, '提示')
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.mradio {
  margin-bottom: 5px;
}
</style>
